<template>
    <div v-if="show"
        class="h-[100vh]! absolute left-0 bottom-0 z-[42] block max-h-[calc(100vh-var(--hh))] w-full translate-y-[100%] overflow-y-auto overflow-x-hidden h-[calc(100vh-var(--hh))] bg-black/60">
        <div class="h-full" @click="emit('update:show', false)">
            <div class="flex flex-col gap-8 bg-white px-4 pt-2" @click.stop>
                <div class="flex flex-col gap-8 md:gap-6">
                    <v-treeview v-model:activated="activated" :items="items" density="compact" item-value="id"
                        activatable open-on-click>
                        <template #title="{ item }">
                            <span :class="{ 'text-blue': !item.children }">{{ item.title }}</span>
                        </template>
                    </v-treeview>
                    <div>
                        <a href="/contact-us" class="cms-link-wrapper transition-all hover:text-blue">
                            <p class="cms-text-md font-figtree antialiased font-medium !m-0 hidden md:block">Get In
                                Touch</p>
                            <p class="cms-text-xl font-figtree antialiased font-medium !m-0 visible md:hidden">Get In
                                Touch</p>
                        </a>
                    </div>
                    <div class="flex flex-col gap-[27px]">
                        <hr class="w-full border-black/10">
                        <div class="flex flex-col gap-[14px]">
                            <a class="group flex items-center gap-3 transition-all duration-100 hover:cursor-pointer hover:text-blue"
                                href="https://dashboard.thestudio.com" target="_blank"><img
                                    src="https://media.thestudio.com/website/img/icons/user_dark.svg"
                                    class="h-[20px] w-[16px]" width="16" height="20">
                                <p class="cms-text-base font-figtree antialiased font-medium !m-0">Customer Area</p>
                            </a>
                            <div
                                class="group flex items-center gap-3 transition-all duration-100 hover:cursor-pointer hover:text-blue">
                                <img src="https://media.thestudio.com/website/img/icons/chats.svg"
                                    class="h-[16px] w-[17px]" width="17" height="16">
                                <p class="cms-text-base font-figtree antialiased font-medium !m-0">Chat with an Expert
                                </p>
                            </div>
                        </div>
                        <hr class="w-full border-black/10">
                        <div class="flex flex-col gap-4 pb-8">
                            <p class="cms-text-base font-figtree antialiased font-medium !m-0 text-black">Stay in touch
                            </p>
                            <div class="flex items-center space-x-[10px]"><a
                                    href="https://www.instagram.com/thestudio.official/" target="_blank"><img
                                        src="https://media.thestudio.com/website/img/icons/socials/ig_dark.svg"
                                        width="15" height="15"></a><a href="https://www.linkedin.com/company/2663356"
                                    target="_blank"><img
                                        src="https://media.thestudio.com/website/img/icons/socials/ln_dark.svg"
                                        width="15" height="15"></a><a href="https://www.facebook.com/factorybythestudio"
                                    target="_blank"><img
                                        src="https://media.thestudio.com/website/img/icons/socials/fb_dark.svg"
                                        width="15" height="15"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import type { ProjuctCategory } from '~/composables/api/common/types';

const props = withDefaults(defineProps<{
    show: boolean
    menus?: ProjuctCategory[]
}>(), {
    show: false,
    menus: []
})
const emit = defineEmits<{
    (e: 'update:show', show: boolean): void
}>()
const activated = ref([])
const items = computed(() => {
    return props.menus.map((item, index) => {
        return {
            id: item.id,
            title: item.name,
        }
    })
})
</script>
<style scoped lang="scss">
:deep(.v-list-item) {
    .v-list-item__overlay {
        display: none !important;
    }

    &::after {
        display: none !important;
    }
}
</style>